<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">


    <title>角色</title>


    <link href="favicon.ico" rel="shortcut icon">
    <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link href="/static/css/plugins/sweetalert/sweetalert2.min.css" rel="stylesheet">


    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/plugins/layer/layer.min.js"></script>


</head>

<body class="gray-bg">
<div class="col-sm-12">


    <div class="ibox float-e-margins">
        <div class="ibox-title">

            <h2>角色列表</h2>

        </div>
        <div class="ibox-content">

            <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                <thead>
                <tr>
                    <td>
                        <button class="btn btn-info pull-left " onclick="add_role()"
                                type="button"><i class="fa fa-plus"></i> 添加
                        </button>
                    </td>
                </tr>
                <tr>

                    <th data-toggle="true">ID</th>
                    <th>角色名</th>
                    <th>类型</th>
                    <th>父节点</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for role in roles %}

                <tr>
                    <td>{{role.id}}</td>
                    <td>{{role.name}}</td>
                    <td>{{role.role_type}}</td>
                    <td>{{role.get_parent_role().name}}</td>
                    <td>
                        <a class="btn btn-white btn-sm" onclick="update_role('{{role.id}}')"><i
                                class="fa fa-pencil"></i> 编辑 </a>
                        <a class="btn btn-white btn-sm btn-outline btn-danger"
                           onclick="del_role('{{role.id}}')"><i class="fa fa-times"></i>
                            删除 </a>
                    </td>
                </tr>
                {% endfor %}

                </tbody>
                <tfoot>

                </tfoot>

            </table>
        </div>
    </div>
</div>

<script>
    function add_role() {
        layer.open({
            type: 2,
            title: false,
            closeBtn: 1, //不显示关闭按钮
            shade: [0],
            area: ['500px', '370px'],
            // offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 5,
            offset: 'auto',
            content: ["{{ url_for('admin.update_role') }}", 'no'], //iframe的url，no代表不显示滚动条
        });
    }

    function update_role(role_id) {
        layer.open({
            type: 2,
            title: false,
            closeBtn: 1, //不显示关闭按钮
            shade: [0],
            area: ['500px', '370px'],
            // offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 5,
            offset: 'auto',
            content: ["{{ url_for('admin.update_role')}}" + "?role_id=" + role_id, 'no'], //iframe的url，no代表不显示滚动条
        });
    }

    function del_role(role_id) {
        Swal.fire({
            type: 'warning', // 弹框类型
            title: '删除角色', //标题
            text: "删除角色后将无法恢复，请谨慎操作！", //显示内容
            html: '<div class="checkbox"><label class="checkbox" for="closeButton">' +
                '<input id="force_del" type="checkbox" value="checked" class="input-mini" checked="">' +
                '强制删除子角色</label></div>',
            confirmButtonColor: '#3085d6',// 确定按钮的 颜色
            confirmButtonText: '确定',// 确定按钮的 文字
            showCancelButton: true, // 是否显示取消按钮
            cancelButtonColor: '#d33', // 取消按钮的 颜色
            cancelButtonText: "取消", // 取消按钮的 文字

            focusCancel: true, // 是否聚焦 取消按钮
            reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
        }).then((isConfirm) => {
            try {
                //判断 是否 点击的 确定按钮
                if (isConfirm.value) {
                    if ($("input[id='force_del']").prop('checked')) {
                        $.ajax({
                            type: "GET",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            //服务地址
                            url: "{{ url_for('admin.del_role')}}" + "?role_id=" + role_id + "&force_del=1",
                            //关闭异步模式
                            async: false,
                            //序列化表单
                            // data: $('#role_fm').serialize(),
                            success: function (result) {
                                if (result.success == true) {
                                    success("删除角色信息成功！");
                                }
                                if (result.success == false) {
                                    failed("删除角色信息失败！");
                                }
                                ;
                            }
                        });
                    } else {
                        $.ajax({
                            type: "GET",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            //服务地址
                            url: "{{ url_for('admin.del_role')}}" + "?role_id=" + role_id + "&force_del=0",
                            //关闭异步模式
                            async: false,
                            //序列化表单
                            // data: $('#role_fm').serialize(),
                            success: function (result) {
                                if (result.success == true) {
                                    success("删除角色信息成功！");
                                }
                                if (result.success == false) {
                                    failed("删除角色信息失败！");
                                }
                            }
                        });
                    }
                }
            } catch (e) {
                alert(e);
            }
        });
    }

    //成功弹出提示，并刷新页面
    function success(msg) {
        //
        layer.close(layer.index)
        Swal.fire({
            title: "成功",
            text: msg,
            type: "success",
            showConfirmButton: true,
        }).then((result) => {
            window.location.replace("{{ url_for('admin.roles')}}")
        });
    }

    //出错弹出提示，并刷新页面
    function failed(msg) {
        //
        layer.close(layer.index)
        Swal.fire({

            title: "失败",
            type: "error",
            text: msg,
            showConfirmButton: true,
        }).then((result) => {
            window.location.replace("{{ url_for('admin.roles')}}")
        });
    }


</script>
<!-- 全局js -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/plugins/footable/footable.all.min.js"></script>
<script src="/static/js/plugins/sweetalert/sweetalert2.js"></script>

</body>

</html>
